<template>
    <div>
        <div style="width: 100%;padding: 10px;display: flex;">
            <div style="width: 30%;height: 380px;">
                <div class="box1">
                    <div class="box3">
                        <div class="box4"><a-icon type="gold" theme="twoTone" />服务总数</div><div class="box5">{{servicedata.total}}</div>
                    </div>
                    <div class="box9">
                        <div class="box6"><div class="box7">发布</div><div class="box8">{{ servicedata.online }}</div></div>
                        <div class="box6"><div class="box7">下线</div><div class="box8">{{ servicedata.outline }}</div></div>
                        <div class="box6"><div class="box7">调用总数</div><div class="box8">{{ servicedata.logCount }}</div></div>
                        <div class="box6"><div class="box7">平均耗时</div><div class="box8">{{ servicedata.time }}&nbsp;ms</div></div>
                    </div>
                </div>
                <div class="box1">
                    <div class="box3">
                        <div class="box4"><a-icon type="folder-open" theme="twoTone" />应用总数</div><div class="box5">{{appdata.appCount}}</div>
                    </div>
                    <div class="box9">
                        <div class="box6"><div class="box7">授权接口</div><div class="box8">{{appdata.apiCount}}</div></div>
                        <div class="box6"><div class="box7">调用成功率</div><div class="box8">{{appdata.success*100}}%</div></div>
                    </div>
                </div>
            </div>
            <div class="box2">
                <a-menu v-model="currentchart" mode="horizontal">
                    <a-menu-item key="amount">调用量统计</a-menu-item>
                    <a-menu-item key="num">调用次数统计</a-menu-item>
                </a-menu>
                <span v-if="currentchart=='amount'">
                    <div style="position: absolute;right: 0;z-index: 100;">
                        <a-range-picker
                        showTime
                        format="yyyy-MM-DD HH:mm:ss"
                        :ranges="pickerOptions"
                        :placeholder="['开始时间', '结束时间']"
                        @change="onChange"
                        @ok="onOk"
                        :defaultValue="defaulttimerange"
                        ></a-range-picker>
                    </div>
                    <div style="width: 100%;height: 80%;">
                        <amount :Day="day" :DayFail="dayfail" :DaySuccess="daysuccess"></amount>
                    </div>
                </span>
                <span v-else-if="currentchart=='num'">
                    <div style="width: 100%;height: 80%;display: flex;padding: 10px;">
                        <div style="width: 49%;height: 100%;margin-right: 20px;">
                            <service :ServiceCountList="serviceCountList" :ServiceNameList="serviceNameList"></service>
                        </div>
                        <div style="width: 49%;height: 100%;">
                            <app :AppCountList="appCountList" :AppNameList="appNameList"></app>
                        </div>
                    </div>
                </span>
            </div>
        </div>
        <div>
            <a-menu v-model="current" mode="horizontal">
                <a-menu-item key="ser">服务监控</a-menu-item>
                <a-menu-item key="app">应用监控</a-menu-item>
            </a-menu>
            <span v-if="current=='ser'">
                
                    <a-layout>
                        <a-layout-sider theme="light" class="asidemain" :class="{asidemainshow:!asideStatus}">
                            <a-row>
                                <a-col>
                                    模块目录
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-input-search placeholder="请输入" @change="onsearch"></a-input-search>
                            </a-row>
                            <a-row>
                                <a-tree :tree-data="contentsData"  @select="handleNodeClick" @expand="onExpand" :expanded-keys="expandedKeys"
                                :auto-expand-parent="autoExpandParent"
                                :replace-fields="replaceFields" show-icon>
                                    <a-icon slot="parent" type="folder-open"/>
                                    <a-icon slot="child" type="folder"/>
                                </a-tree>
                            </a-row>
                        </a-layout-sider>
                        <a-layout>
                            <a-layout-header style="background-color: white;width: 110%;">
                                <a-form :model="queryservice" ref="serviceForm" size="small" layout="inline" style="margin: 10px 0 10px -20px;">
                                    <a-form-item label="接口名称" prop="apiName">
                                        <a-input v-model="queryservice.apiName" placeholder="请输入接口名称" style="width: 125px;"></a-input>
                                    </a-form-item>
                                    <a-form-item label="接口中文名称" prop="apiCname">
                                        <a-input v-model="queryservice.apiCname" placeholder="请输入接口中文名称" style="width: 150px;"></a-input>
                                    </a-form-item>
                                    <a-form-item label="接口状态" prop="apiStatus">
                                        <a-select v-model="queryservice.apiStatus" style="width: 70px;">
                                            <a-select-option :value=null>全部</a-select-option>
                                            <a-select-option value="1">发布</a-select-option>
                                            <a-select-option value="2">下线</a-select-option>
                                        </a-select>
                                    </a-form-item>
                                    <a-form-item label="平均调用时长" prop="minTime">
                                        <a-input v-model="queryservice.minTime" placeholder="最小值" style="width:68px;"></a-input>——
                                    </a-form-item>
                                    <a-form-item prop="maxTime">
                                        <a-input v-model="queryservice.maxTime" placeholder="最大值" style="width:68px;"></a-input>
                                    </a-form-item>
                                    <a-form-item>
                                        <a-button type="primary" @click="handleservice">查询</a-button>
                                    </a-form-item>
                                    <a-form-item>
                                        <a-button @click="resetservice">重置</a-button>
                                    </a-form-item>
                                </a-form>
                            </a-layout-header>
                            <a-layout-content style="position: relative;">
                                <!-- aside侧边栏按钮 -->
                                <div class="asideopenclose"  @click="asidechange">
                                    <a-icon type="left" v-if="aside_open_close"/>
                                    <a-icon type="right" v-else/>
                                </div>
                                <div style="width: 100%;">
                                    <a-table :columns="columnsservice" :dataSource="servicelist" bordered :pagination="servicepageConfig" @change="servicetablePageChange"
                                 :scroll="{ y: 500 }" :rowKey="record=>record.requestId" style="margin-left: 20px;">
                                    <span slot="apiStatus" slot-scope="text, record">
                                        <span v-if="record.apiStatus=='1'"><div style="display: flex;align-items: center;">
                                            <div style="width: 10px;height: 10px;border-radius: 50%;background-color: rgb(3,191,22)">
                                            </div>
                                            发布
                                        </div></span>
                                        <span v-else>
                                            <div style="display: flex;align-items: center;">
                                                <div style="width: 10px;height: 10px;border-radius: 50%;background-color: rgb(127,127,127)">
                                                </div>
                                                下线
                                            </div>
                                        </span>
                                    </span>
                                    <span slot="success" slot-scope="text,record">
                                        {{record.success*100}}%
                                    </span>
                                </a-table>
                                </div>
                                
                            </a-layout-content>
                        </a-layout>
                    </a-layout>
            </span>
            <span v-else-if="current=='app'">
                <!-- 应用的搜索条件 -->
                <div style="width: 100%;height: 60px;padding:10px;">
                    <a-form-model :model="queryapp" ref="appForm" size="small" layout="inline">
                        <a-row :span="24">
                            <a-col :span="20">
                                <a-form-model-item label="应用名称" prop="name">
                                    <a-input v-model:value="queryapp.name" placeholder="请输入应用名称"></a-input>
                                </a-form-model-item>  
                                <a-form-model-item label="联系人" prop="contact">
                                    <a-input v-model="queryapp.contact" placeholder="请输入联系人"></a-input>
                                </a-form-model-item>
                                <a-form-model-item label="平均调用时长" prop="minTime">
                                    <a-input v-model="queryapp.minTime" placeholder="最小值" style="width:70px;"></a-input>&nbsp;——
                                </a-form-model-item>
                                <a-form-model-item prop="maxTime">
                                    <a-input v-model="queryapp.maxTime" placeholder="最大值" style="width:70px;"></a-input>
                                </a-form-model-item>
                                <a-form-model-item>
                                    <a-button type="primary" @click="handleapp">查询</a-button>
                                </a-form-model-item>
                                <a-form-model-item>
                                    <a-button @click="resetapp">重置</a-button>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </a-form-model>
                </div>
                
                <!-- 应用监控的表格数据 -->
                <a-table  :columns="columnsapp" :dataSource="applist" :pagination="myCustomerTablePageConfig" @change="myCustomerTablePageChange"
                :scroll="{ y: 500 }"  :rowKey="record=>record.id" bordered>
                    <span slot="apiCount" slot-scope="text, record">
                        <a-button type="link" @click="openapi(record)">{{record.apiCount}}</a-button>
                    </span>
                    <span slot="success" slot-scope="text, record">
                        {{record.success*100}}%
                    </span>
                </a-table>

                <!-- 应用监控的接口详情的表格数据 -->
                <a-modal :title="title" v-model:visible="open" width="1000px">
                    <a-table :columns="columnsapi" :dataSource="apilist" :pagination="apitablepageConfig" @change="apitablepageChange"
                    :rowKey="record=>record.requestId" bordered>

                    </a-table>
                    <div slot="footer" class="dialog-footer">
                        <a-button type="primary" @click="open = false">关闭</a-button>
                      </div>
                </a-modal>
            </span>
        </div>
    </div>
</template>
<script>
import amount from './components/amount';
import service from './components/service';
import app from './components/app';
import moment from 'moment';
import { servicedataget,Amountdataget,appdataget,Topdataget,Applist,Apilist,Servicelist } from '@/api/system/outapi/sermonitor';
import { listModule } from '@/api/system/outapi/manage';

const dataList = []
const generateList = (data) => {
    for (let i = 0; i < data.length; i++) {
        const node = data[i]
        const id = node.id
        const moduleCname=node.moduleCname
        dataList.push({ id, moduleCname: moduleCname })
        if (node.children) {
            generateList(node.children)
        }
    }
}
const getParentKey = (key, tree) => {
    let parentKey
    for (let i = 0; i < tree.length; i++) {
        const node = tree[i]
        if (node.children) {
            if (node.children.some((item) => item.id === key)) {
                parentKey = node.id
            } else if (getParentKey(key, node.children)) {
                parentKey = getParentKey(key, node.children)
            }
        }
    }
    return parentKey
}
const setStyleDisplay = (key, nodes) => {
    let nums = 0
    for (let data of nodes) {
        let bl = false
        if (data.moduleCname.indexOf(key) > -1) {
            bl = true
            nums += 1
        }
        if (!!data.children) {
            if (data.children.length > 0) {
                let count = setStyleDisplay(key, data.children)
                // 如果想 子节点有key 即使父节点没有key也显示的话 添加下面的语句 
                nums += count
                if (!bl && count == 0) {
                    bl = false
                } else {
                    bl = true
                }
            }
        }
        if (bl) {
            delete data['style']
        } else {
            data['style'] = 'display: none'
        }
    }
    return nums
}

export default {
    components:{
        amount,
        service,
        app,
    },
    data() {
    return {
        //树的搜索
        expandedKeys: [],
        searchValue: '',
        autoExpandParent: true,
        //侧边栏状态
        asideStatus:true,
        aside_open_close:true,
        // 服务监控表格
        servicelist:[],
        //服务监控遮罩层
        loading2:false,
        //自定义树
        replaceFields: {
            children: 'children',
            title: 'moduleCname',
            key:'id',
        },
        //目录数据
        contentsData:[],
        //默认时间
        defaulttimerange:[moment().subtract(7, 'days').startOf('day'),moment().endOf('day')],
        //应用数据
        appdata:{
            appCount:null,
            success:null,
            apiCount:null,
        },
        //服务数据
        servicedata:{
            logCount:null,
            total:null,
            outline:null,
            online:null,
            time:null,
        },
        //日期选择
        params: {
            startTime: [moment().subtract(7, 'days').startOf('day')],
            endTime: [moment().endOf('day')],
        },
        //调用次数top5图表
        serviceCountList:null,
        serviceNameList:null,
        appCountList:null,
        appNameList:null,
        //统计调用量图表
        day: null,
        dayfail: null,
        daysuccess: null,
        //选择时间
        pickerOptions: {
            近七天:[moment().subtract(7, 'days').startOf('day'),moment().endOf('day')],
            近十五天:[moment().subtract(15, 'days').startOf('day'),moment().endOf('day')],
            近三十天:[moment().subtract(30, 'days').startOf('day'),moment().endOf('day')]
        },
        //弹出层标题
        title:'',
        // 是否显示弹出层(应用监控的接口详情)
        open: false,
        //遮罩层
        loading: true,
        //应用监控的表格数据
        applist:[],
        //应用监控的接口详情表格数据
        apilist:[],
        //切换调用量图表与调用次数图表
        currentchart:['amount'],
        //切换服务监控和应用监控
        current: ['ser'],
        //服务监控的表格
        columnsservice:[
        {
            title: '',
            customRender:(text,record,index) => 
            this.servicepageConfig ? `${(this.servicepageConfig.current-1)*(this.servicepageConfig.pageSize)+index+1}` :index+1,
            width:60,
        },
        {
            title:'接口名称',
            dataIndex:'apiName',
            width:100,
        },
        {
            title:'接口请求地址',
            dataIndex:'requestUrl',
        },
        {
            title:'状态',
            dataIndex:'apiStatus',
            scopedSlots: { customRender: 'apiStatus' },
            width:80,
        },
        {
            title:'最长调用时长(ms)',
            dataIndex:'maxTime',
            width:145,
        },
        {
            title:'最短调用时长(ms)',
            dataIndex:'minTime',
            width:145,
        },
        {
            title:'平均调用时长(ms)',
            dataIndex:'avgTime',
            width:145,
        },
        {
            title:'调用次数',
            dataIndex:'executeCount',
            width:90,
        },
        {
            title:'调用成功率',
            dataIndex:'success',
            width:110,
            scopedSlots: { customRender: 'success' },
        },
        ],
        //应用监控的表格
        columnsapp:[
        {
            title: '',
            customRender:(text,record,index) => 
            this.myCustomerTablePageConfig ? `${(this.myCustomerTablePageConfig.current-1)*(this.myCustomerTablePageConfig.pageSize)+index+1}` :index+1,
            width:70,
        },
        // {
        //     dataIndex:'id',
        //     width:70,
        // },
        {
            title:'应用名称',
            dataIndex:'name',
        },
        {
            title:'AppId',
            dataIndex:'appId',
        },
        {
            title:'secKey',
            dataIndex:'secKey',
        },
        {
            title:'接口数量',
            dataIndex:'apiCount',
            width:90,
            scopedSlots: { customRender: 'apiCount' },
        },
        {
            title:'总调用次数',
            dataIndex:'executeCount',
            width:120,
        },
        {
            title:'平均调用时长(ms)',
            dataIndex:'avgTime',
            width:150,
        },
        {
            title:'调用成功率',
            dataIndex:'success',
            width:120,
            scopedSlots: { customRender: 'success' },
        },
        ],
        //接口详情的表格
        columnsapi:[
        {
            title: '',
            customRender:(text,record,index) => 
            this.apitablepageConfig ? `${(this.apitablepageConfig.current-1)*(this.apitablepageConfig.pageSize)+index+1}` :index+1,
            width:50,
        },
        // {
        //     dataIndex:'requestId',
        //     width:50,
        //     align:'center',
        // },
        {
            title:'接口名称',
            dataIndex:'apiName',
            align:'center',
        },
        {
            title:'请求接口地址',
            dataIndex:'requestUrl',
            align:'center',
        },
        {
            title:'所属模块',
            dataIndex:'moduleCname',
            align:'center',
        },
        {
            title:'调用次数',
            dataIndex:'executeCount',
            align:'center',
        },
        {
            title:'平均调用时长(ms)',
            dataIndex:'avgTime',
            align:'center',
        },
        ],
        //应用监控分页参数
        myCustomerTablePageConfig: {
        // 总数据
        total: 0,
        // 每页条数
        pageSize: 10,
        // 当前页
        current: 1,
        // 显示多少页
        showTotal: (total) => `共 ${total} 条`,
        // 是否开启分页数据条数
        showSizeChanger: true,
        // 分页每页显示条数
        pageSizeOptions: ['10', '20', '50', '100'],
    },
    //应用监控的查询参数
    queryapp:{
        pageNum:'1',
        pageSize:'10',
        name:null,
        contact:null,
        minTime:null,
        maxTime:null,
        },
    //接口详情的分页参数
    apitablepageConfig: {
        // 总数据
        total: 0,
        // 每页条数
        pageSize: 10,
        // 当前页
        current: 1,
        // 显示多少页
        showTotal: (total) => `共 ${total} 条`,
        // 是否开启分页数据条数
        showSizeChanger: true,
        // 分页每页显示条数
        pageSizeOptions: ['10', '20', '50', '100'],
    },
    //接口详情的查询参数
    queryapi:{
            id:null,
            pageNum:'1',
            pageSize:'10',
        },
    //服务监控的分页参数
    servicepageConfig:{
        // 总数据
        total: 0,
        // 每页条数
        pageSize: 10,
        // 当前页
        current: 1,
        // 显示多少页
        showTotal: (total) => `共 ${total} 条`,
        // 是否开启分页数据条数
        showSizeChanger: true,
        // 分页每页显示条数
        pageSizeOptions: ['10', '20', '50', '100'],
    },
    //服务监控的查询参数
        queryservice:{
            moduleId:null,
            pageNum:'1',
            pageSize:'10',
            apiStatus:null,
            apiName:null,
            apiCname:null,
            minTime:null,
            maxTime:null,
        },
    };
    },
    created() {
      this.getServicedata();
      this.getAppdata();
      this.getTopdata();
      this.params.startTime=this.$moment(this.params.startTime[0]).format('YYYY-MM-DD HH:mm:ss');
      this.params.endTime=this.$moment(this.params.endTime[0]).format('YYYY-MM-DD HH:mm:ss');
      this.getAmountdata(this.params);
      this.getappList();
      this.getModuleData();
      this.getserviceList();
    },
    methods: {
        onExpand(expandedKeys) {
            this.expandedKeys = expandedKeys
            this.autoExpandParent = false
        },
        //树的搜索
        onsearch(e){
            const value = e.target.value
            const expandedKeys = dataList
                .map((item) => {
                    if (item.moduleCname.indexOf(value) > -1) {
                        return getParentKey(item.id, this.contentsData)
                    }
                    return null
                })
                .filter((item, i, self) => item && self.indexOf(item) === i)
                setStyleDisplay(value, this.contentsData)
                Object.assign(this, {
                expandedKeys,
                searchValue: value,
                autoExpandParent: true,
            })
        },
        //侧边栏收起
        asidechange(){
            this.asideStatus = !this.asideStatus 
        if(this.asideStatus){
            this.aside_open_close =true
        }else{
            this.aside_open_close =false
        }
        },
        // 设置树结构图标
    setIcon(menus) {
      let that = this;
      for (let value of menus) {
            if (value.children && value.children.length > 0) { // 关键 - 判断是否还有子节点
                that.setIcon(value.children)
                value.slots = {icon: 'parent'}
            } else {
                value.slots = {icon: 'child'}
            }
    }
        that.contentsData  = menus;
    },
        handleNodeClick(data) { // 点击目录节点
            this.queryservice.moduleId = data[0]
            this.queryservice.pageNum='1';
            this.queryservice.pageSize='10';
            this.servicepageConfig.current=1;
            this.servicepageConfig.pageSize=10;
            this.getserviceList();
    },
        getModuleData() { // 获取目录数据
            listModule().then(response => {
            this.contentsData = response.rows
            this.setIcon(this.contentsData);
            generateList(this.contentsData)
      })
    },
        //重置服务监控表单
        resetserviceform(){
            this.queryservice={
                moduleId:null,
                pageNum:'1',
                pageSize:'10',
                apiStatus:null,
                apiName:null,
                apiCname:null,
                minTime:null,
                maxTime:null,
            }
            this.servicepageConfig={
                total: 0,
                pageSize: 10,
                current: 1,
                showTotal: (total) => `共 ${total} 条`,
                showSizeChanger: true,
                pageSizeOptions: ['10', '20', '50', '100'],
        }
        },
        //重置应用监控表单
        resetappform(){
            this.queryapp={
                pageNum:'1',
                pageSize:'10',
                name:null,
                contact:null,
                minTime:null,
                maxTime:null,
            }
            this.myCustomerTablePageConfig={
                total: 0,
                pageSize: 10,
                current: 1,
                showTotal: (total) => `共 ${total} 条`,
                showSizeChanger: true,
                pageSizeOptions: ['10', '20', '50', '100'],
            }
        },
        //重置接口详情表单
        resetapi(){
            this.queryapi={
                id:null,
                pageNum:'1',
                pageSize:'10',
            }
            this.apitablepageConfig={
                total: 0,
                pageSize: 10,
                current: 1,
                showTotal: (total) => `共 ${total} 条`,
                showSizeChanger: true,
                pageSizeOptions: ['10', '20', '50', '100'],
        }
        },
        //获取接口详情表格
        getapiList(){
            Apilist(this.queryapi).then(response=>{
                this.apilist = response.rows;
                this.apitablepageConfig.total=response.total;
            })
        },
    //获取应用数据
    getAppdata(){
        appdataget().then(response=>{
            this.appdata=response.data
        })
    },
    //获取调用量统计(图表)
    getAmountdata(){
        if(this.params.startTime==''||this.params.startTime==''){}
        else {
            Amountdataget(this.params).then(response =>{
                this.day = response.data.dayList
                this.dayfail = response.data.failList
                this.daysuccess = response.data.successList
        })
      }
    },
    //获取top5数据(图表)
    getTopdata(){
        Topdataget().then(response=>{
            this.serviceCountList=response.data.serviceCountList.reverse()
            this.serviceNameList=response.data.serviceNameList.reverse()
            this.appCountList=response.data.appCountList.reverse()
            this.appNameList=response.data.appNameList.reverse()
        })
    },
    //获取服务数据
    getServicedata(){
        servicedataget().then(response=>{
            this.servicedata=response.data
        })
    },
    //日期选择按下确定
    onOk(value) {
      this.getAmountdata();
    },
    //日期改变时
    onChange(value, dateString) {
      this.params.startTime = dateString[0]
      this.params.endTime = dateString[1]
      this.getAmountdata();
    },
    //打开应用监控的接口详情
    openapi(record){
        this.resetapi();
        this.queryapi.id=record.id;
        this.getapiList();
        this.open=true;
        this.title='接口详情';
    },
    // 应用监控的查询列表 
    getappList() {
    this.loading = true;
    Applist(this.queryapp).then(response => {
        this.applist = response.rows;
        this.myCustomerTablePageConfig.total = response.total;
        this.loading = false;
    });
    },
    //应用监控的查询按钮
    handleapp(){
        this.getappList();
    },
    // 应用监控的重置按钮 
    resetapp() {
        this.resetappform();
        this.handleapp();
    },
    // 服务监控的查询列表 
    getserviceList() {
    Servicelist(this.queryservice).then(response => {
        this.servicelist = response.rows;
        this.servicepageConfig.total = response.total;
    });
    },
    //服务监控的查询按钮
    handleservice(){
        this.getserviceList();
    },
    //服务监控的重置按钮
    resetservice(){
        this.resetserviceform();
        this.handleservice();
    },
    //服务监控分页改变
    servicetablePageChange(pagination) {
        this.queryservice.pageNum=pagination.current
        this.queryservice.pageSize=pagination.pageSize
        this.getserviceList()
        let { current, pageSize } = pagination
        this.servicepageConfig = Object.assign(this.servicepageConfig, { current, pageSize })
    },
    //应用监控分页改变
    myCustomerTablePageChange(pagination) {
        this.queryapp.pageNum=pagination.current
        this.queryapp.pageSize=pagination.pageSize
        this.getappList()
        let { current, pageSize } = pagination
        this.myCustomerTablePageConfig = Object.assign(this.myCustomerTablePageConfig, { current, pageSize })
    },
    //接口详情分页改变
    apitablepageChange(pagination){
        this.queryapi.pageNum=pagination.current
        this.queryapi.pageSize=pagination.pageSize
        this.getapiList()
        let { current, pageSize } = pagination
        this.apitablepageConfig = Object.assign(this.apitablepageConfig, { current, pageSize })
    }
    },
};
</script>
<style>
.box1{
    height: 180px;
    margin: 10px;
    background: linear-gradient(to right,rgb(230,237,249),rgb(240,244,252),rgb(253,254,255));
    border-radius: 7px;
    box-shadow:5px 5px 3px rgb(214, 212, 212);
}
.box2{
    position: relative;
    width: 78%;
    height: 370px;
    background: linear-gradient(to right,rgb(230,237,249),rgb(240,244,252),rgb(253,254,255));
    margin: 10px;
    border-radius: 7px;
    box-shadow:5px 5px 3px rgb(214, 212, 212);
}
.box3{
    width: 100%;
    height: 60px;
    display: flex;
}
.box4{
    width:50%;
    font-size:20px;
    font-weight: bolder;
    line-height: 60px;
    padding: 20px;
}
.box5{
    width:50%;
    font-size:30px;
    font-weight: bolder;
    line-height: 60px;
    padding: 20px;
}
.box9{
    width: 100%;
    height: 100px;
    display: flex;
}
.box6{
    width: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* background-color: aqua; */
    margin: 20px 20px;
}
.box7{
    width: 80px;
    height: 50%;
    line-height: 60px;
    color: rgb(176,177,177);
}
.box8{
    width: 60px;
    height: 50%;
    font-weight: bolder;
}
.asidemain{
    width: 250px !important;
}
.asidemainshow{
    display: none;
}
.asideopenclose{
    position: absolute;
    left: 0;
    top: 45%;
    width: 18px;
    height: 60px;
    line-height: 60px;
    color: rgb(131,159,163); 
    background-color: white;
    border-radius: 0 6px 6px 0;
    border: 1px rgb(231,231,231) solid;
    font-size: 18px;
    z-index: 1000;
    cursor: pointer;
}
</style>